<template>
	<view class="main">
		<view class="title">
			水晶
		</view>
		<view class="box">
			<view class="box-text">
				{{userStore.user.crystal}}
			</view>
			<view class="count-btn-lottery" @tap="onAdd">获取水晶</view>	
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import { mapStores, mapActions, mapState } from 'pinia'
	import { userStore } from '@/store/modules/userStore.js'	
	export default {
		data() {
			return {
				
			}
		},		
		computed:{
			...mapStores(userStore)
		},
		methods: {
			onAdd(){
				$http.request({
					url:'index/add_crystal',
					token:true
				}).then( res => {
					let addNum = res.data.addNum;
					this.userStore.addCrystal(addNum);
					
				}).catch( (e) => {
					uni.showToast({
						title:e,
						icon:'none'
					})
				});					
			}
		}
	}
</script>

<style scoped>
	.main{
		background-color: white;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url('../../static/img/fuli/aqsj_bg.png');
		background-size: 100% 100%;
	}
	.title{
		position:absolute;
		color: white;
		font-size: 64rpx;
		left: 320rpx;
		top:88rpx;
		
	}
	.box{
		display: flex;
		flex-direction: column;
		align-items: center;		
	}
	.box-text{
		color: white;
		font-size: 88rpx;
		position: relative;
		top:-25rpx;		
		display: flex;
		justify-content: center;
		align-items: center;
		width: 360rpx;
		height: 360rpx;
		background-color: #9973D7;
		border-radius: 50%;
	}
	.box-button{
		width: 300rpx;
		height: 120rpx;
		background-color: black;
		border-radius: 15rpx;
		color: white;
		font-size: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.count-btn-lottery{
		width: 240rpx;
		height: 80rpx;
		background-image: url('../../static/img/common/btn/5.png');
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;		
		color: white;
		font-size: 28rpx;
	}
</style>
